<template>

	<div class="user-box">
		<el-row class="p-all-20 box-flex">
			<el-col :span="3" class="m-r-10">
				<el-select v-model="filterValue" placeholder="请选择" size="mini">
					<el-option v-for="item in filterList" :key="item" :value="item">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请输入手机号昵称或用户角色" v-model="keyWord" clearable size="mini"></el-input>
			</el-col>
			<el-col :span="4" class="m-l-10">
				<el-button type="primary" @click="searchAdmin(1)" size="mini">筛选</el-button>
				<el-button type="primary" @click="searchAdmin(2)" size="mini">重置</el-button>
			</el-col>
		</el-row>
		<el-row class="p-all-20 box-flex m-t-10">
			<el-col :span="5">
				<el-button type="success" @click="setNewAdmin" size="mini">新建用户</el-button>
				<el-button type="danger" @click="allDelete" size="mini">批量删除</el-button>
			</el-col>
		</el-row>
		<div class="tab-div">
			<el-table :data="adminList" @selection-change="handleSelectionChange" width="100%" height="100%" >
				<el-table-column type="selection" :selectable="selectable">
				</el-table-column>
				<el-table-column label="手机号" align="center">
					<template slot-scope="scope">{{ scope.row.login_name }}</template>
				</el-table-column>
				<el-table-column prop="nick_name" label="昵称"></el-table-column>
				<el-table-column prop="role_name" label="角色" align="center"></el-table-column>
				<el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button @click="toAdminEditer(scope.$index,scope.row)" size='mini' type="primary" :disabled="!scope.$index">修改</el-button>
						<el-button @click="toDeleteAdmin(scope.row)" size='mini' type="danger" :disabled="!scope.$index">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog :title="title" :visible.sync="centerDialogVisible" width="30%" center>
				<el-row class="p-all-20 ">
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">手机号</span>
						<el-input type="请输入手机号" v-model="userNumber" class="w-input" />
					</el-col>
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">昵称</span>
						<el-input type="请输入昵称" v-model="userName" class="w-input" />
					</el-col>
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">密码</span>
						<el-input type="请输入密码" v-model="userPassword" class="w-input" />
					</el-col>
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">角色</span>
						<el-select v-model="roleValue" placeholder="请选择" class="w-input" >
							<el-option v-for="item in roleOptions" :key="item.roleName" :value="item.roleName">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveAdmin">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<current-page :current-page="page" :page-size="pageSize" :page-total="logPageTotal" @handleCurrentChange="handleCurrentChange"></current-page>
	</div>
</template>

<script>
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import {
		getToken
	} from '@/utils/auth'
	import currentPage from '@/components/current-page/current-page.vue'
	export default {
		props: {
			page: {
				default: 0,
				type: Number,
				required: true,
			},
			logPageTotal: {
				default: 0,
				type: Number,
				required: true,
			},
			// 用户数据
			adminList: {
				default: [],
				type: Array,
				required: true
			},
			// 角色
			ruleMap: {
				default: {},
				type: [Array, Object],
				required: true
			}

		},
		data() {
			return {
				title: '新建用户',
				roleOptions: [], // 角色数据
				roleValue: '',
				userNumber: '',
				userName: '',
				userPassword: '',
				joinDate: '',
				userId: '',
				keyWord: '',
				pageSize: 10,
				centerDialogVisible: false,
				multipleSelection: [],
				filterValue: '手机号',
				filterList: ['手机号', '昵称', '用户角色']
			}
		},
		methods: {
			selectable(row,index){
				console.log(row)
				console.log(index)
				if(!index ){
					return false
				}else{
					return  true
				}
			},
			searchAdmin(num) {
				if(num == 2) {
					this.keyWord = ''
				}
				let val = this.filterValue == '手机号' ? 'mobile' : this.filterValue == '昵称' ? 'name' : 'roleName'
				this.$emit('searchAdmin', num, this.keyWord, val)
			},
			allDelete() {
				if (!this.multipleSelection.length) {
					this.$message({
						message: '请选择需要删除的用户',
						type: 'warning'
					});
					return
				}
				let map = this.multipleSelection.map((item) => {
					return item.merchant_user_id
				}).join(',')
				this.$confirm("确定批量删除选中用户?", "删除用户", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'admin/batchDelete',
						params: {
							token: getToken(),
							merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
								'',
							ids: map
						}
					}).then(res => {
						if (res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.centerDialogVisible = false
							this.$emit('editUser')
						}else{
							this.$message({
								message: res.data.message,
								type: 'warning'
							});
						}
					}).catch((err) => {
						this.$message({
							message: err.message,
							type: 'warning'
						});
					})
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			/**
			 * @desc 修改用户
			 */
			toAdminEditer(index, item) {
				console.log(item)
				this.title = '修改用户'
				this.userId = item.merchant_user_id
				this.userNumber = item.login_name
				this.userName = item.nick_name
				this.roleValue = item.role_name
				this.userPassword = item.password
				this.centerDialogVisible = true
			},
			saveAdmin() {
				let msg = !this.userNumber ? '请填写手机号' : !this.userName ? '请填写昵称' : !this.userPassword ? '请填写密码' : !this
					.roleValue ? '请选择角色' : ''
				if (msg) {
					this.$message({
						message: msg,
						type: 'warning'
					});
					return
				}
				let rol = ''
				this.ruleMap.forEach((item) => {
					if (item.roleName == this.roleValue) {
						rol = item.id
					}
				})
				this.$ajax({
					api: 'admin/save',
					params: {
						id: this.userId,
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
						loginName: this.userNumber,
						nickName: this.userName,
						password: this.userPassword,
						roleId: rol
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.centerDialogVisible = false
						this.$emit('editUser')
						return
					}
					this.$message({
						message: res.data.message,
						type: 'warning'
					});

				}).catch((err) => {
					this.$message({
						message: err.data.message,
						type: 'warning'
					});
				})
			},
			// 删除管理员
			toDeleteAdmin(item) {
				this.$confirm("确定删除此用户?", "删除用户", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'admin/delete',
						params: {
							token: getToken(),
							merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
								'',
							userId: item.merchant_user_id
						}
					}).then(res => {
						if (res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.centerDialogVisible = false
							this.$emit('editUser')
						}else{
							this.$message({
								message: res.data.message,
								type: 'warning'
							});
						}
					}).catch((err) => {
						this.$message({
							message: err.message,
							type: 'warning'
						});
					})
				})
			},
			setNewAdmin() {
				this.userName = ''
				this.userNumber = ''
				this.userPassword = ''
				this.userId = ''
				this.roleOptions = this.ruleMap
				this.centerDialogVisible = true
			},
			handleCurrentChange(page) {
				this.$emit('handleAdminPage', page)
			}
		},
		components: {
			currentPage
		}


	}
</script>

<style>
	.user-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		max-width: 100%;
		overflow: auto;
		height: 100%;
	}
	.box-flex {
		display: flex;
	}
	
	.w-input {
		width: 250px;
	}
	
	.sp-w-50 {
		width: 100px;
		line-height: 40px;
	}
	.tab-div{
		display: flex;
		flex-direction: column;
		overflow: auto;
		height: 100%;
		flex: 1;
	}
</style>
